<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>添加Job</title>
</head>
<body>
<div class="form-group">
    <input type="text" class="form-control" name="jobName"
           required="required" placeholder="作业名称"/>
</div>
<div class="form-group">
    <input type="text" class="form-control" name="jobGroup" placeholder="作业分组名"/>
</div>
<div class="form-group">
    <div class="input-group">
        <input type="text" id="cronExpression" name="cronExpression" class="form-control" placeholder="执行时间表达式(cronExpression)"/>
                                                    <span class="input-group-btn">
                                                        <button id="btnCron" class="btn blue" type="button">在线设计
                                                        </button>
                                                    </span>
    </div>
</div>
<div class="form-group">
    <input type="text" class="form-control" name="description" placeholder="作业描述"/>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="cronModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width: 800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="cronModalLabel">
                    Cron表达式在线设计
                </h4>
            </div>
            <div class="modal-body">
                <div class="cronDiv"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">关闭
                </button>
            </div>
        </div><!-- /.modal-content -->
        <link href="assets/global/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
        <!-- custom jquery UI is required for: sliders, buttons, and tabs -->
        <script src="assets/global/plugins/jquery-ui/jquery-ui.min.js"></script>
         <!--<script src="assets/global/plugins/cron-editor/js/cron.js"></script>-->
         <!--<script src="assets/global/plugins/cron-editor/js/dateFormat.js"></script>-->
        <script src="assets/global/plugins/cron-editor/js/jquery.croneditor.js"></script>
    </div><!-- /.modal -->
</div>

<script th:inline="javascript">
    /*<![CDATA[*/
    $(function () {
        $("#btnCron").click(function(){
            $('#cronModal').modal({
                keyboard: true
            });
        });
        $('.cronDiv').croneditor({
            value: "* * * * * *"
        });
        $("#cronModal").on('hide.bs.modal', function () {
            debugger
            $("#cronExpression").val($(".cronDiv #cronString").val());
        })
    });

    /*]]>*/
</script>

</body>
</html>